<template lang="pug">
    sbpro-layout-default(
        footerClasses='bg-white footer-light'
    )
        sbpro-top-nav(
            topNavClasses='bg-transparent navbar-dark fixed-top'
            brandClasses='text-white'
            buttonClasses='btn-teal'
        )

        router-link(:to="bannerLink")
            sbpro-page-header(
                headerClasses='bg-img-cover overlay overlay-dark overlay-10 page-header-light',
                borderType='rounded',
                borderClasses='text-light',
                :backgroundImage='bannerImage'
                :bgTransitionSeconds='transitionSeconds'
            )
                home-header(:bannerTitle="bannerTitle")

        sbpro-page-section(
            sectionClasses='bg-light py-5',
            borderType='waves',
            borderClasses='text-white'
        )
            home-overview

</template>

<script>
import HomeOverview from './home-overview.vue';
import HomeHeader from './home-header.vue';

import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import { getBannerList } from '@/api/home';

export default {
    name: 'home',
    components: {
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
        'home-overview': HomeOverview,
        'home-header': HomeHeader,
    },
    methods: {
        gotoPage(index) {
            this.currentIndex = index;
        },
        init() {
            getBannerList().then(bannerList => {
                this.bannerList = bannerList;
            });
        },
        runInv() {
            this.timer = setInterval(() => {
                this.gotoPage(this.nextIndex);
            }, this.intervalMs);
        },
    },
    computed: {
        bannerImage() {
            return 'url("' + this.bannerList[this.currentIndex].img + '")';
        },
        bannerTitle() {
            return this.bannerList[this.currentIndex].title;
        },
        bannerLink() {
            return '/post/' + this.bannerList[this.currentIndex].pid;
        },
        //上一张
        prevIndex() {
            if (this.currentIndex == 0) {
                return this.bannerList.length - 1;
            } else {
                return this.currentIndex - 1;
            }
        },
        //下一张
        nextIndex() {
            if (this.currentIndex == this.bannerList.length - 1) {
                return 0;
            } else {
                return this.currentIndex + 1;
            }
        },
    },
    data() {
        return {
            //横幅需要高度一致
            bannerList: [{ img: '/assets/img/banners/banner0.jpg' }],
            currentIndex: 0, //默认显示图片
            timer: null, //定时器
            intervalMs: 12000, //间隔时间ms
            transitionSeconds: 3, //动画变化时间
        };
    },
    created() {
        //加载轮播图片
        this.init();
        //执行轮播函数
        this.runInv();
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
//更改bg-transparent
.bg-transparent {
    //background-color: rgba(36, 41, 46, 0.6) !important;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
</style>
